<template>
  <div class="w-[400px] h-full overflow-hidden">
    <div class="p-2 h-full">
      <a-tabs class="h-full" v-model:active-key="distributionTab">
        <a-tab-pane key="theme" tab="选择主题">
          <ThemeSelector @select="selectTheme" />
        </a-tab-pane>
        <a-tab-pane key="product" tab="选择商品">
          <ProductSelector
            v-model:product-id="lcdDistribution.currentProductId"
            @select="selectProduct"
          />
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { type LcdTheme } from '@/api/modules/lcd/theme';
import { lcdDistribution, distributionTab, currentComponent, currentTheme } from '../data/data';
import type { Goods } from '@/api/modules/data/goods';

const selectTheme = (item: LcdTheme) => {
  lcdDistribution.value.themeId = item.themeId;
  currentTheme.value = item;
};
const selectProduct = (item: Goods) => {
  lcdDistribution.value.currentProductId = item.goodsId;
  currentComponent.value.productIds = [item.goodsId];
};
</script>

<style lang="scss" scoped>
:deep(.ant-tabs) {
  height: 100%;
}
:deep(.ant-tabs-content) {
  height: 100% !important;
}
</style>
